@import "mixins/palette.scss";
@import "media-query";
@import "loader";
@import "dark-theme";

$border-radius: 10px;
$filter-border-radius: 5px;
$modal-border-radius: 10px;
$context-menu-border-radius: 20px;
$region-tag-border-radius: 3px;

$optionbar-height: 60px;
$commandbar-height: 60px;
$commandbar-extended-height: 110px;
$menubar-width: 240px;
$search-bar-width: 400px;

$standard-padding: 20px;
$modal-padding: 20px;

$left-compacted-sidebar: 130px;

$form-button-padding: 10px 20px;
$toggle-button-padding: 3px 8px;
$padding-form-control: 5px 10px;
$font-size-form-control: 16px;
$form-control-height: 40px !important;

$icon-button-size: 25px;
$icon-button-width: 20px;
$icon-button-height: 20px;
$icon-button-width-small: 14px;
$icon-button-height-small: 14px;

$compact-fixed-width: 560px;

:not(input):not(textarea),
:not(input):not(textarea)::after,
:not(input):not(textarea)::before {
  -webkit-user-select: none;
  user-select: none;
}

input, button, textarea, :focus {
  outline: none; // You should add some other style for :focus to help UX/a11y
}


html, body {
  height: 100%;
  letter-spacing: -.5px;

  .stop-showing-on-loaded-app {
    display: none;
  }
}

::ng-deep {
  .mat-elevation-z4 {
    box-shadow: none;
  }

  .mat-menu-panel {
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
    border-radius: $border-radius;
    background-color: white !important;
    
    .mat-menu-content {
      background-color: white !important;
    }
    
    .mat-menu-item,
    .mat-legacy-menu-item {
      background-color: white !important;
      
      &:hover,
      &.mat-menu-item-highlighted,
      &.mat-legacy-menu-item-highlighted,
      &:focus {
        background-color: white !important;
      }
    }
  }

  .ng-dropdown-footer {
    border-top: none !important;
  }

  .mat-menu-item i {
    font-size: 20px;
    position: relative;
    top: 2px;
  }

  .mat-menu-item[disabled] {
    opacity: 0.5;
  }

  .mat-menu-item:hover:not([disabled]),
  .mat-menu-item.cdk-program-focused:not([disabled]),
  .mat-menu-item.cdk-keyboard-focused:not([disabled]),
  .mat-menu-item-highlighted:not([disabled]) {
    background: $white-text-color;

    &::after {
      content: '';
      position: absolute;
      top: 3px;
      bottom: 3px;
      left: 10px;
      right: 10px;
      border-radius: 5px;
      background: rgba(0, 0, 0, .04);
      cursor: pointer;
    }
  }

  .mat-tab-body-wrapper {
    padding: 0 19px;
    min-height: 386px;
  }

  .modal-content {
    .ng-dropdown-panel .ng-dropdown-panel-items {
      max-height: 120px;
    }
  }

  .mat-tab-group {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .context-menu-drop-class {
    display: none !important;
  }

  .cdk-overlay-container {
    z-index: 1070 !important;
  }

  .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
    background-color: rgba(58, 57, 57, 0.45);
  }

  .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
    background-color: $dark-main-background;
  }

  .allow-cr {
    white-space: pre-line;
  }
}


body {
  position: relative;
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;
}

::placeholder {
  color: $silver-75;
}

:focus {
  outline: none !important;
  box-shadow: none;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: $silver-25;
}

::-webkit-scrollbar {
  width: 6px;
  height: 0;
  background-color: $white-text-color;
}

::-webkit-scrollbar-track-piece {
  background-color: $white-text-color;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: $silver-dark;
}

::-webkit-scrollbar-thumb:horizontal {
  background-color: transparent;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: $silver-dark;

  * {
    cursor: pointer;
  }
}

.btn-link {
  text-decoration: underline;
  color: $silver-dark;
}

hr {
  margin: 5px 0 0 0;
  display: block;
  height: 1px;
  border-top: 1px solid $silver-50;
}

h5 {
  font-size: 14px;
  color: $silver-dark;
}

.clear {
  clear: both;
}

small.text-error {
  display: block;
  text-align: right;
  color: $danger-color;
}

.line-start {
  margin-right: auto;
}

.line-end {
  margin-left: auto;
}

.string {
  font-weight: bold;
}

.scrollable {
  overflow-y: auto;
}

.hidden {
  visibility: hidden;
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 0;
  height: 0;
}

.not-displayed {
  display: none;
}

.inline {
  display: inline-block;
}

.max-width {
  width: 100% !important;
}

.divider {
  width: auto;
  display: block;
  height: 1px;
  margin: 5px 10px;
  background: $silver-50;
}

.icon-button {
  border: none !important;
  outline: none !important;
  background: none !important;

  display: flex;
  align-content: center;
  align-items: center;

  min-width: $icon-button-width !important;
  min-height: $icon-button-height !important;
  width: $icon-button-width !important;
  height: $icon-button-height !important;

  padding: 0 !important;

  transition: opacity 0.3s ease;
  cursor: pointer;

  i, mat-icon {
    color: $table-text;
    font-size: $icon-button-size;
  }

  &:hover {
    opacity: 0.7;
  }
}

.badge {
  display: inline-block;
  padding: 5px;
  min-width: 50px;
  height: 24px;
  font-size: 12px;
  font-weight: normal;
  text-transform: uppercase;

  background: $main-color-light;
  border-radius: 0;
  color: $white-text-color;

  &.badge-rounded {
    height: 20px;
    border-radius: 12px;
    text-transform: none;
    font-size: 10px;
  }

  &.badge-gray {
    background: $silver-50;
    color: $text-color;
  }

  &.badge-black {
    background: $text-color !important;
    color: $white-text-color;
  }

  &.badge-blue {
    background: $dark-sky-blue;
    color: $white-text-color;
  }

  &.badge-orange {
    background: $aws;
    color: $white-text-color;
  }

  &.badge-red {
    background: $danger-color;
    color: $white-text-color;
  }

  &.badge-green {
    background: $success-color;
    color: $white-text-color;
  }

  &.badge-purple {
    background: $primary-color;
    color: $white-text-color;
  }

  &.badge-azure {
    background: $main-color-light;
    color: $white-text-color;
  }
  &.badge-localstack {
    background: #251F53;
    color: $white-text-color;
  }
}

.table {
  //table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none !important;
  user-select: none;
  cursor: pointer;

  tr {
    border: none;
  }

  thead th {
    font-size: 14px;
    font-weight: 500;
    position: sticky;
    top: 0;
    background: $white-text-color;
    padding: 0;
  }

  tbody td, thead th {
    color: $table-text;
    border: none;
    border-bottom: 1px solid $silver-50;
    height: 56px;
  }

  tbody td {
    vertical-align: middle;
  }
}

/* TABS Style */
.tabs {
  position: relative;
  margin: 0;
}

.tabs .tab {
  cursor: pointer;
  padding: 10px 20px;
  margin: 0 2px -1px;
  background: #fff;
  display: inline-block;
  color: #909f9d;
  border-radius: 5px 5px 0 0;
  border: none;
}

.mat-tab-labels {
  display: flex;
  justify-content: center;
}

.mat-tab-header {
  background: transparent;
  margin: 0;
}

/* Styles for tab labels */
.mat-tab-label {
  min-width: 25px !important;
  background-color: #ffffff;
  text-align: center !important;
  font-weight: normal;
  text-transform: capitalize;
  color: $text-color;
  height: auto !important;
  padding: initial !important;
}

/* Styles for the active tab label */
.mat-tab-label.mat-tab-label-active {
  min-width: 25px !important;
  text-align: center !important;
  font-weight: normal;
  text-transform: capitalize;
  color: $black;
  opacity: 1;

  .mat-tab-label-content {
    background-color: $silver-30;
    border-radius: $border-radius;
  }
}

/* Styles for the ink bar */
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
  height: 0;
}

.mat-tab-label, .mat-tab-label-content {
  display: inline-flex !important;
  flex-direction: column !important;
  text-align: center;
  padding: 5px 6px;
  margin: 5px 0;
  width: 80px;
}

.mat-tab-icon, .mat-tab-label-text {
  display: block !important;
  text-align: center;
  font-size: 25px;
}

.mat-tab-label-text {
  font-size: 12px;
}

.mat-ripple-element {
  display: none !important;
}

.mat-list-base .mat-subheader {
  font-size: 14px !important;
  color: $table-text;
  font: unset !important;
}

.mat-list-base .mat-subheader:first-child {
  padding-top: 10px;
  margin-left: -10px;
}

.mat-list-base .mat-list-item,
.mat-list-base .mat-list-item.mat-list-item-with-avatar,
.mat-list-base .mat-list-option.mat-list-item-with-avatar,
.mat-list-base .mat-list-item.mat-list-item-with-avatar,
.mat-list-base .mat-list-option.mat-list-item-with-avatar {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height: 35px !important;
  font-size: 14px;

  &:hover {
    background: $white-two;
    border-radius: 6px;
    margin-left: 10px !important;
    width: 218px !important;

    .mat-list-item-content .mat-list-text {
      margin-left: -10px;
    }
  }
}

.mat-expansion-panel-header {
  padding: 0 24px 0 10px !important;
  border-radius: 0;
  height: 48px !important;
}

.mat-accordion .mat-expansion-panel:last-of-type {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.mat-accordion .mat-expansion-panel:first-of-type {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.mat-expansion-panel:not([class*=mat-elevation-z]) {
  box-shadow: none !important;
}

.mat-subheader {
  display: flex;
  box-sizing: border-box;
  padding: 12px 16px !important;
  align-items: flex-end !important;
}

.mat-expansion-panel-body {
  margin: 0 -24px;
}

.mat-content {
  justify-content: space-between;
}

.mat-expansion-panel-header-description {
  display: flex;
  margin-right: 10px;
  justify-content: flex-end;
  align-items: center;
}

.selected-integration {
  background-color: $silver-25;
  border-radius: 6px;
  margin-left: 10px !important;
  width: 218px !important;
  transition: all 0.2s ease;

  .mat-list-item-content {
    padding: 0 6px !important;

    .status {
      left: 19px;
    }
  }

  &:hover {
    .mat-list-item-content {
      left: 1px;

      .status {
        left: 20px;
      }
    }

    .mat-line {
      padding: 0 9px !important;
    }
  }
}

::ng-deep {
  .app-windows-detected {
    .compact {
      .left {
        width: 92px !important;
      }

      .right {
        width: calc(100% - 92px) !important;
      }

      .search-bar {
        width: 188px !important;
      }
    }
  }
}

.compact {
  .left {
    width: $left-compacted-sidebar !important;
    border-bottom: 1px solid $silver-75;
  }
}

.compact {
  .right {
    width: calc(100% - #{$left-compacted-sidebar}) !important;
  }
}

.compact {
  .filtering {
    display: none !important;
  }

  .search-bar {
    width: 258px !important;
  }


  .extended {
    .tag-filters {
      margin-left: -$left-compacted-sidebar;
      padding: 10px !important;
    }

    .left-shadow {
      top: 8px;
      left: 10px;
    }

    .right-shadow {
      top: 8px;
      right: 74px;
    }

    .tag-filters-area {
      width: calc(100% - 64px);
    }
  }
}

.close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  color: $table-text;
  cursor: pointer;
  transition: opacity 0.3s ease;
  text-decoration: none;
  z-index: 1;

  &:hover {
    opacity: 0.6;
    text-decoration: none !important;
  }
}

i.fal.fa-plus-circle {
  color: black;
}

.tooltip-inner {
  font-size: 12px;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before,
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^=right] .arrow::before,
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^=top] .arrow::before,
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^=bottom] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

.show-in-taskbar-only {
  display: none;
}

.filter-button {
  border-radius: $filter-border-radius !important;
}


.mat-expansion-panel-header {
  height: 35px !important;
  transform: unset !important;
}

button, a, input, i {
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;
}

.window-buttons, .windows-menu {
  display: none;
}

::ng-deep {
  .app-windows-detected {
    .windows-menu {
      -webkit-user-drag: none;
      -webkit-app-region: no-drag;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-start;
      position: absolute;
      left: 15px;
      top: 18px;
    }

    .window-buttons {
      -webkit-user-drag: none;
      -webkit-app-region: no-drag;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-start;
      position: absolute;
      right: 0;
      top: 0;

      .minimize, .maximize, .quit {
        width: 42px;
        height: 32px;
        background: transparent;
        color: $text-color;
        text-align: center;
        -webkit-user-drag: none;
        -webkit-app-region: no-drag;
        transition: all 0.3s ease;
        display: inline-flex;
        justify-content: center;
        justify-items: center;
        align-items: center;

        img {
          width: 11px;
          image-rendering: pixelated;
          opacity: 0.6;
        }

        &:hover {
          background: $silver-25;
          opacity: 1;
        }
      }

      .maximize.disabled:hover {
        background: transparent !important;
      }

      .quit:hover {
        background: #FD0007;
        color: $white-text-color;

        img {
          filter: invert(1);
          opacity: 1;
        }
      }
    }

    button, a, input, i {
      -webkit-user-drag: none;
      -webkit-app-region: no-drag;
    }

    .right {
      .line-end {
        margin-right: auto;
        margin-left: 0;
      }
    }

    .compact {
      .right {
        .line-end {
          margin-right: 200px;
          margin-left: auto;
        }

        .main-bar {
          padding: 10px 38px 9px 20px;
        }
      }
    }
  }
}

::ng-deep {
  .mat-tooltip {
    font-size: 10px;
    background-color: $text-black;
  }

  .dark-theme .mat-tooltip {
    font-size: 10px;
    background-color: $dark-tooltip-color;
  }
}

.modal + .modal {
  background: rgba(41, 32, 68, 0.5);

  &:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    height: 50px;
    background: rgba(41, 32, 68, 0.5);
  }
}

.fa-spinner:before {
  display: block;
  margin-top: 1px;
}

.command-bar:not(.compact) .top-right-option-button {
  position: relative;
  left: -10px;
}

.app-windows-detected .command-bar:not(.compact) .top-right-option-button {
  position: relative !important;
  left: 10px !important;
}

::ng-deep {
  .ng-select .ng-arrow-wrapper:hover .ng-arrow {
    border-color: #666;
  }

  .mat-menu-panel {
    min-height: initial !important;
  }
}

tr:hover img.provider-icon {
  display: none;
}

tr:hover .moon-hover-session {
  margin-left: 0;
  font-size: 20.5px;
  margin-right: 10px;
  margin-top: 3px;
}

.blackery {
  color: $text-color;
}

.enable-option {
  .mat-slide-toggle-label {
    gap: 10px;
    left: -148px !important;
    position: relative;
  }

  .mat-slide-toggle-content {
    font-weight: bold;
    font-size: 17px !important;
  }
}
